<template>
  <div class="familyAccount">
    <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="家庭账号">
        <div
          class="btn"
          v-if="
            $store.state.roleType == 2 &&
            familyList &&
            familyList.list.length < 3
          "
        >
          <p class="add" @click="showModal">添加账号</p>
          <p class="title">最多添加三个账号</p>
        </div>
        <ul class="list" v-if="familyList">
          <li v-for="(item, index) in familyList.list" :key="index">
            <div class="top">
              <p class="name">{{ item.name }}</p>
              <p class="phone" v-if="item.phone">
                {{ item.phone.substring(0, 3) }}-{{
                  item.phone.substring(3, 7)
                }}-{{ item.phone.substring(7, 11) }}
              </p>
              <p class="nav">{{ item.relation }}</p>
            </div>
            <div class="bottom">
              {{ item.createDate }}
              <span v-if="$store.state.roleType == 2"
                >成功将账号（{{ item.phone }}）绑定为您的家庭账号</span
              >
              <span v-else
                >账号（{{ item.phone }}）成功将您绑定成他的家庭账号</span
              >
            </div>
            <p class="remove" @click="showConfirm(item.familyNo)">
              <a-icon type="api" /> 解除关系
            </p>
          </li>
          <div
            class="noList"
            v-if="
              familyList.list &&
              familyList.list.length < 1 &&
              $store.state.roleType != 2
            "
          >
            <img src="@/assets/image/employment/noList.png" alt="" />
            <p>您暂未完成平台的残疾人认证，暂无家庭账号信息。</p>
            <p>如有残疾人家庭成员，可邀请其注册认证，添加您为家庭账号哦~</p>
          </div>
          <!-- 分页器 -->
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="pageIndex"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
        </ul>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      :destroyOnClose="true"
      title="添加家庭账号"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :afterClose="closemodel"
      :closable="false"
      cancelText="取消"
      okText="添加"
    >
      <div>
        <a-input v-model="phone" placeholder="请输入手机号码">
          <img
            width="16"
            src="@/assets/image/icon_account.png"
            slot="prefix"
            alt=""
          />
          <!-- <a-icon style="color:#999999"  type="mobile" /> -->
        </a-input>
        <div class="code">
          <a-input v-model="code" placeholder="请输入验证码">
            <img
              width="16"
              src="@/assets/image/icon_denglu (3).png"
              slot="prefix"
              alt=""
            />
          </a-input>
          <a-button
            class="getCode"
            type="primary"
            size="large"
            :loading="loading"
            @click="getCode"
            >{{ djs == "获取验证码" ? "获取验证码" : djs + "s" }}</a-button
          >
        </div>
        <a-select
          placeholder="请选择绑定关系"
          style="width: 430px"
          @change="handleChange"
        >
          <!-- <template #placeholder>
                      <img src="@/assets/image/employment/select.png" style="width:20px;height:20px;" alt="">
                      <span>请选择绑定关系</span>
                  </template> -->
          <a-select-option value="1"> 父子 </a-select-option>
          <a-select-option value="2"> 父女 </a-select-option>
          <a-select-option value="3"> 母女 </a-select-option>
          <a-select-option value="4"> 母子 </a-select-option>
          <a-select-option value="5"> 朋友 </a-select-option>
          <a-select-option value="6"> 其他关系 </a-select-option>
        </a-select>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      djs: "获取验证码",
      imgUrl: require("@/assets/image/pagint.png"),
      visible: false,
      confirmLoading: false,
      relation: "",
      phone: "",
      familyList: null,
      // 验证码
      code: "",
      loading: false,
      // 分页
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      interval: null,
    };
  },
  watch: {
    phone(news, old) {
      return news,old;
      // console.log(news);
    },
  },
  mounted() {
    this.getFamilyList();
  },
  methods: {
    //   弹框关闭
    closemodel() {
      this.phone = "";
      this.relation = "";
      this.code = "";
      this.djs = "获取验证码";
      clearInterval(this.interval);
    },
    changePagin(e) {
      this.pageIndex = e;
      this.getFamilyList();
    },
    // 获取家庭账号列表
    getFamilyList() {
      this.$ajax({
        url: "/user/userfamily/list?pageSize=3&pageIndex=1",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.familyList = res.data;
        } else {
          this.familyList = {};
        }
      });
    },
    handleChange(value) {
      this.relation = value;
    },
    // 获取验证码
    getCode() {
      if (this.djs != "获取验证码") {
      } else if (this.phone && /^1[3-9]\d{9}$/.test(this.phone)) {
        this.djs = 60;
        this.interval = setInterval(() => {
          if (this.djs == 1) {
            this.djs = "获取验证码";
            clearInterval(this.interval);
          } else {
            this.djs--;
          }
        }, 1000);
        this.$ajax({
          url: "/user/userinfo/sendsms?mobile=" + this.phone + "&type=5",
          method: "post",
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("验证码已发送，请注意查收！");
          } else {
            this.djs = "获取验证码";
            clearInterval(this.interval);
            this.$message.error(res.msg);
          }
        });
      } else {
        this.$message.error("请检查手机号是否输入正确！");
      }
    },
    showConfirm(e) {
      let _this = this;
      this.$confirm({
        title: "提示信息",
        content: (h) => <div style="">是否确认解除这个账号的绑定关系</div>,
        cancelText: "取消",
        okText: "确定",

        onOk() {
          // 删除家庭账号
          _this
            .$ajax({
              url: "/user/userfamily/update",
              method: "post",
              params: {
                delFlag: "Y",
                familyNo: e,
              },
            })
            .then(() => {
              _this.getFamilyList();
            });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "test",
      });
    },
    showModal() {
      if (this.familyList.list.length < 3) {
        this.visible = true;
      }
    },
    handleOk(e) {
      if (!this.phone) {
        this.$message.error("请输入手机号！");
      } else if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.$message.error("请输入正确的手机号！");
      } else if (!this.code) {
        this.$message.error("请输入验证码！");
      } else if (!this.relation) {
        this.$message.error("请选择关系！");
      } else {
        this.$ajax({
          url: "/user/userfamily/save",
          method: "post",
          params: {
            // 联系电话
            phone: this.phone,
            // 关系
            relation: this.relation,
            smsCode: this.code,
          },
        }).then((res) => {
          if (res.code == 200) {
            clearInterval(this.interval);
            this.phone = "";
            this.relation = "";
            this.code = "";
            this.visible = false;
            this.getFamilyList();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
      // this.ModalText = 'The modal will be closed after two seconds';
      // this.confirmLoading = true;
      // setTimeout(() => {
      //     this.visible = false;
      //     this.confirmLoading = false;
      // }, 2000);
    },
    handleCancel(e) {
      // console.log("Clicked cancel button");
      this.visible = false;
    },
  },
};
</script>

<style scoped lang="less">
.noList {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 116px;
  img {
    width: 180px;
    height: 158px;
    margin: 0 auto;
  }
  p {
    width: 259px;
    margin: 0 auto;
    margin-top: 16px;
    color: #333333;
    font-size: 15px;
    line-height: 21px;
  }
}
// .ant-modal-confirm-body-wrapper::before{
/deep/.ant-btn-primary {
  color: #333333 !important;
}
// }
/deep/.ant-select {
  margin-top: 24px;
}
/deep/.ant-modal {
  width: 550px !important;
}
/deep/.ant-modal-body {
  padding: 0px 60px;
  .code {
    margin-top: 24px;
    .ant-input-affix-wrapper {
      width: 300px;
    }
    .getCode {
      display: inline-block;
      width: 113px;
      height: 32px;
      margin-left: 16px;
      text-align: center;
      line-height: 32px;
      border-radius: 4px;
      color: #333333;
    }
  }
}
/deep/.ant-modal-title {
  text-align: center;
  padding: 49px 0 20px;
}
/deep/.ant-modal-header {
  border: 0;
}
/deep/.ant-modal-footer {
  text-align: center;
  border: 0;
  padding: 49px 0 41px;
  .ant-btn {
    width: 128px;
    height: 44px;
    border: 1px solid #ffbe37;
    color: #ffbe37;
  }
  .ant-btn-primary {
    border: 0;
    background: #ffbe37;
    color: #333333;
    margin-left: 24px;
  }
}
.familyAccount {
  .ant-tabs-tabpane-active {
    padding-bottom: 50px;
  }
  .list {
    li {
      position: relative;
      margin-left: 27px;
      margin-bottom: 16px;
      width: 800px;
      height: 149px;
      padding: 30px 32px 44px;
      background: #ffffff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      .top {
        display: flex;
        align-items: bottom;
        p {
          margin-right: 32px;
        }
        .name {
          font-size: 24px;
          font-weight: bold;
          color: #333333;
          line-height: 24px;
        }
        .phone {
          font-size: 16px;
          color: #333333;
          line-height: 24px;
        }
        .nav {
          // width: 52px;
          height: 24px;
          padding: 0 8px;
          background: #ffbe37;
          font-size: 14px;
          color: #333333;
          line-height: 24px;
          border-radius: 2px;
          // text-align: center;
        }
      }
      .bottom {
        margin-top: 24px;
        font-size: 16px;
        color: #666666;
        line-height: 24px;
      }
      .remove {
        position: absolute;
        right: 27px;
        bottom: 24px;
        cursor: pointer;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    .add {
      width: 108px;
      height: 42px;
      font-size: 16px;
      margin-right: 32px;
      text-align: center;
      border-radius: 2px;
      line-height: 40px;
      cursor: pointer;
      border: 1px solid #ffbe37;
      color: #ffbe37;
    }
    .add:hover {
      background: #ffbe37;
      color: #333333;
      // border: 0;
    }
    .title {
      color: #333333;
      font-size: 16px;
    }
  }
}
</style>